<template>
	<z-paging
		show-refresher-update-time
		show-refresher-when-reload
		v-model="data.list"
		ref="paging"
		@query="getList"
	>
		<view style="padding: 20rpx" slot="top">
			<view class="wallet_bg">
				<text>我的余额</text>
				<text class="money">{{ vk.vuex.getters("$user/getUserBalanceStr") }}</text>
				<view class="btn" @tap="vk.navigateTo('/pages/user/wallet/wallet')">充值</view>
			</view>
			<view class="title">钱包明细</view>
		</view>
		<block v-for="item in data.list" :key="item._id">
			<view class="list_item">
				<view class="left">
					<text>{{ item.title || "无标题" }}</text>
					<text class="text">{{ $fn.timeFormat(item._add_time) }}</text>
				</view>
				<view class="right" :class="{ green: item.type === 1, red: item.type === 2 }">
					<text>{{ valueFilter(item.value) }}</text>
					<text class="text">余额：{{ $fn.priceFilter(item.balance, 0) }}</text>
				</view>
			</view>
		</block>
	</z-paging>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			// 获取list数据的云函数请求路径
			url: "client/user.getBalanceRec",
			// init请求返回的数据
			data: {
				list: [],
				total: "-",
				hasMore: true // 是否还有下一页数据
			},
			queryForm1: {
				pagination: { pageIndex: 1, pageSize: 10 },
				formData: {},
				columns: [{ key: "no", mode: "%%" }],
				// 排序规则
				sortRule: [{ name: "_add_time", type: "desc" }]
			},
			// 页面状态
			state: { loadmore: "loading" }
		}
	},
	methods: {
		getBalance() {
			vk.callFunction({ url: "client/user.getMyInfo" })
		},
		// 获取list数据
		getList(pageIndex, pageSize) {
			let that = this
			that.$set(that.queryForm1.pagination, "pageIndex", pageIndex)
			that.$set(that.queryForm1.pagination, "pageSize", pageSize)
			vk.pubfn.getListData2({
				that,
				url: that.url,
				success: res => {
					this.$refs.paging.complete(res.rows)
				}
			})
		},
		valueFilter(value = 0) {
			let newValue = vk.pubfn.priceFilter(value)
			if (value == 0) {
				return "-0.00"
			}
			return value > 0 ? `+${newValue}` : newValue
		}
	}
}
</script>

<style lang="scss" scoped>
.wallet_bg {
	background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/3050b8ca-17d3-435e-b50d-cfe75d404aa5.png") no-repeat center;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64rpx 40rpx 50rpx;
	font-size: 28rpx;
	line-height: 40rpx;
	color: #ffffff;
	position: relative;
	.money {
		font-size: 58rpx;
		font-weight: 600;
		line-height: 81rpx;
		margin-top: 34rpx;
	}
	.btn {
		position: absolute;
		padding: 8rpx 56rpx;
		border: 1rpx solid #ffffff;
		border-radius: 12rpx;
		bottom: 60rpx;
		right: 40rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.title {
	font-weight: 700;
	font-size: 28rpx;
	line-height: 30rpx;
	text-align: center;
	padding: 40rpx 0 20rpx;
}

.list_item {
	margin: 20rpx;
	padding-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #f5f5f5;
	.left,
	.right {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #140005;
		align-items: flex-end;
		.text {
			font-size: 24rpx;
			line-height: 33rpx;
			color: #999999;
		}
	}
	.left {
		flex: 1;
		align-items: flex-start;
	}
	.green {
		color: #6dcfa5;
	}
	.red {
		color: #fb4e4e;
	}
}
</style>
